<template>
  <el-drawer
    :visible.sync="drawerVisible"
    title="标签评价"
    size="60%"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer tag-rate-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="100px" ref="editForm" class="editForm">
          <el-form-item label="信息准确性" prop="infoAcrc">
            <el-rate v-model="editForm.infoAcrc" show-score></el-rate>
          </el-form-item>
          <el-form-item label="数据准确性" prop="dataAcrc">
            <el-rate v-model="editForm.dataAcrc" show-score></el-rate>
          </el-form-item>
          <el-form-item label="数据时效性" prop="dataTmln">
            <el-rate v-model="editForm.dataTmln" show-score></el-rate>
          </el-form-item>
          <el-form-item label="一句话简评" prop="cmntPhrase">
            <el-input placeholder="请输入简评" v-model="editForm.cmntPhrase" maxlength="20" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose()">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      assetId: '',
      editForm: {
        cmntPhrase: '',
        infoAcrc: 0,
        dataAcrc: 0,
        dataTmln: 0
      }
    }
  },
  methods: {
    showDrawer(assetId) {
      this.assetId = assetId
      this.getRates()
    },
    getRates() {
      this.$ajax({
        url: this.$ajax.setUrl(`cac/cacAssetCmnt/getCmnt/${this.assetId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data) {
            this.editForm.infoAcrc = data.data.infoAcrc
            this.editForm.dataAcrc = data.data.dataAcrc
            this.editForm.dataTmln = data.data.dataTmln
            this.editForm.cmntPhrase = data.data.cmntPhrase
          }
          this.drawerVisible = true
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    submit() {
      this.$ajax({
        url: this.$ajax.setUrl('cac/cacAssetCmnt/save'),
        method: 'post',
        data: this.$ajax.setData({
          assetId: this.assetId,
          infoAcrc: this.editForm.infoAcrc,
          dataAcrc: this.editForm.dataAcrc,
          dataTmln: this.editForm.dataTmln,
          cmntPhrase: this.editForm.cmntPhrase
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.$emit('refresh')
          this.drawerVisible = false
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    beforeClose() {
      this.assetId = ''
      this.editForm.infoAcrc = 0
      this.editForm.dataAcrc = 0
      this.editForm.dataTmln = 0
      this.editForm.cmntPhrase = ''
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss">
.tag-rate-drawer {
  .el-rate {
    margin-top: 10px;
  }
}
</style>
